---
import HungerFull from "@/assets/icon/hunger/full.svg";
import HungerHalf from "@/assets/icon/hunger/half.svg";
import HungerEmpty from "@/assets/icon/hunger/empty.svg";
import ToughnessFull from "@/assets/icon/toughness/full.svg";
import ToughnessHalf from "@/assets/icon/toughness/half.svg";
import ToughnessEmpty from "@/assets/icon/toughness/empty.svg";
import HeartFull from "@/assets/icon/heart_normal/full.svg";
import HeartHalf from "@/assets/icon/heart_normal/half.svg";
import HeartEmpty from "@/assets/icon/heart_normal/empty.svg";
import ArmorFull from "@/assets/icon/armor/full.svg";
import ArmorHalf from "@/assets/icon/armor/half.svg";
import ArmorEmpty from "@/assets/icon/armor/empty.svg";
import SaturationEmpty from "@/assets/icon/saturation/empty.svg";
import Saturation1_4 from "@/assets/icon/saturation/1-4.svg";
import Saturation1_2 from "@/assets/icon/saturation/1-2.svg";
import Saturation3_4 from "@/assets/icon/saturation/3-4.svg";
import SaturationFull from "@/assets/icon/saturation/full.svg";

const IconMap = {
  hunger: { full: HungerFull, half: HungerHalf, empty: HungerEmpty },
  toughness: {
    full: ToughnessFull,
    half: ToughnessHalf,
    empty: ToughnessEmpty,
  },
  heart: { full: HeartFull, half: HeartHalf, empty: HeartEmpty },
  armor: { full: ArmorFull, half: ArmorHalf, empty: ArmorEmpty },
  saturation: {
    empty: SaturationEmpty,
    14: Saturation1_4,
    12: Saturation1_2,
    34: Saturation3_4,
    full: SaturationFull,
  },
};

const cnNameMap: Record<keyof typeof IconMap, string> = {
  hunger: "饥饿值",
  toughness: "盔甲韧性",
  heart: "生命值",
  armor: "盔甲",
  saturation: "饱和度",
};

export interface Props {
  val: number;
  type: keyof typeof IconMap;
}

function BasicCalc(icon: (typeof IconMap)["heart"], val: number) {
  val /= 2;
  const int = Math.floor(val);
  if (int !== val) return new Array(int).fill(icon.full).concat([icon.half]);
  else return new Array(val).fill(icon.full);
}

function SaturationCalc(icon: (typeof IconMap)["saturation"], val: number) {
  val /= 2;
  const int = Math.floor(val);
  if (int === val) return new Array(val).fill(icon.full);

  const p = val - int;
  const cur = new Array(Math.floor(val)).fill(icon.full);
  if (p < 0.25) cur.push(icon[14]);
  else if (p < 0.5) cur.push(icon[12]);
  else cur.push(icon[34]);

  return cur;
}

function CalcWidth(val: number) {
  if (val > 20) return 70;
  return 18 * Math.ceil(val / 2);
}

const { val, type } = Astro.props;

const alt = cnNameMap[type];

const TargetIcon = IconMap[type];

let result = [];

if (val <= 20) {
  switch (type) {
    case "saturation":
      result = SaturationCalc(
        TargetIcon as (typeof IconMap)["saturation"],
        val,
      );
      break;

    default:
      result = BasicCalc(TargetIcon as (typeof IconMap)["heart"], val);
      break;
  }
}
---

<span
  class={`relative top-[1.5px] ${val >= 21 && "mr-1"} inline-flex align-sub`}
  style={val < 21
    ? {
        width: `${CalcWidth(val)}px`,
      }
    : {}}
>
  {
    val < 21 ? (
      result.map((v) => (
        <img class="w-[18px] h-[18px] !bg-transparent" src={v.src} alt={alt} />
      ))
    ) : (
      <>
        <img
          class="w-[18px] h-[18px] !bg-transparent"
          src={TargetIcon.full.src}
          alt={alt}
        />
        <span class="relative -top-1 ml-1">{` × ${(val / 2).toFixed(
          1,
        )} `}</span>
      </>
    )
  }
</span>
